/**
 * Ant Design Vue 组件样式增强
 * 此文件用于覆盖和增强 Ant Design Vue 组件的默认样式
 */

/* a-image 组件全局样式增强 */
.ant-image {
  // 基础样式增强
  display: inline-block;
  position: relative;
  overflow: hidden;
  
  // 添加默认过渡效果
  .ant-image-img {
    transition: all 0.3s ease-in-out;
    
    &:hover {
      transform: scale(1.05);
    }
  }

  // 图片预览加载中状态优化
  .ant-image-mask {
    background-color: rgba(0, 0, 0, 0.5);
    &:hover {
      background-color: rgba(0, 0, 0, 0.7);
    }
  }
  
  // 预览图标样式增强
  .ant-image-mask-info {
    color: #fff;
    font-size: 16px;
    
    .anticon {
      margin-right: 4px;
    }
  }
  
  // 图片加载失败样式优化
  .ant-image-placeholder {
    background-color: #f5f5f5;
  }
  
  // 图片错误显示样式
  .ant-image-error {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4d4f;
    background-color: #fff2f0;
    border: 1px solid #ffccc7;
  }
}

/* 卡片和图片样式优化 - 修复顶部空白问题和图片高度不一致问题 */
.ant-card {
  // 整体卡片样式优化
  margin-bottom: 16px;
  overflow: hidden;
    
    // 图片容器样式
    .ant-image {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
      // 防止图片被隐藏
      &-img {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center top;
      }
    }
  }
  
  // 卡片内容区域优化
  .ant-card-body {
    padding: 12px !important;
  }
  
  // 优化卡片元数据区域
  .ant-card-meta-title {
    margin-bottom: 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


/* 全局图片修复 */
img {
  max-width: 100%;
}

/* 图片预览模态框样式增强 */
.ant-image-preview {
  .ant-image-preview-img {
    // 在预览模式下加强阴影和边框
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
    max-height: 90vh;
  }
  
  // 预览操作按钮样式优化
  .ant-image-preview-operations {
    background-color: rgba(0, 0, 0, 0.7);
    
    &-operation {
      &:hover {
        color: #fff;
      }
    }
  }

  // 预览左右箭头样式增强
  .ant-image-preview-switch-left,
  .ant-image-preview-switch-right {
    color: rgba(255, 255, 255, 0.85);
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    padding: 12px;
    
    &:hover {
      background-color: rgba(0, 0, 0, 0.45);
      color: #fff;
    }
  }
} 